<template>
	<view class="container" v-if="state.loading">
		<view class="loading_main">
			<u-loading mode="flower" size="60"></u-loading>
			<view class="loading_footer">
				数据加载中...
			</view>
		</view>
	</view>
	<view class="container" v-else>
		<view class="user">
			<view class="content">
				<view class="label">姓名<text>*</text></view>
				<view class="value">
					<input class="nickname-input" placeholder="请输入昵称" v-model="formData.name" />
					<!-- <u-icon name="arrow-right" /> -->
				</view>
			</view>
			<view class="content">
				<view class="label">头像</view>
				<view class="value">
					<!-- <button class="pop_image" open-type="chooseAvatar" @chooseavatar="getUserInfo">
						<image :src="formData.avatar ?? '/static/img/userlogin.png'" mode=""></image>
					</button> -->
					<u-upload :fileList="uploadData.avatar" :action="state.url"
						:before-upload="(index, list) => beforeUpload(index, list,'avatar')" max-count="1"
						@on-remove="(index,list)=> onRemove(index,list,'avatar')"></u-upload>
				</view>
			</view>
			<view class="content">
				<view class="label">性别<text>*</text></view>
				<view class="value" @click="state.sexShow = true">
					<input placeholder="请选择" disabled v-model="state.genderValue" @focus="state.sexShow = true"></input>
					<u-icon name="arrow-right" />
				</view>
			</view>
			<view class="content">
				<view class="label">出生年月<text>*</text></view>
				<view class="value" @click="selectChange">
					<input placeholder="请选择" disabled v-model="formData.birthday"></input>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="content">
				<view class="label">身份证号</view>
				<view class="value">
					<input placeholder="请输入" v-model="formData.idcard"></input>
					<!-- <u-icon name="arrow-right" /> -->
				</view>
			</view>
			<view class="content">
				<view class="label">证书职务<text>*</text></view>
				<view class="value" @click="yinpingChange('certjob')">
					<input placeholder="请选择" disabled v-model="formData.certjob"></input>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<!-- <view class="value">
					<input placeholder="请输入" v-model="formData.certjob"></input>
					<u-icon name="arrow-right" />
				</view> -->
			</view>
			<view class="content">
				<view class="label">手机号<text>*</text></view>
				<view class="value">
					<input placeholder="请输入" v-model="formData.mobile"></input>
					<!-- <u-icon name="arrow-right" /> -->
				</view>
			</view>
		</view>
		<view class="title">应聘信息</view>
		<view class="yinpin">
			<view class="content">
				<view class="label">职能职位<text>*</text></view>
				<view class="value" @click="yinpingChange('position')">
					<input placeholder="请选择" disabled v-model="formData.position"></input>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="content">
				<view class="label">证书等级<text>*</text></view>
				<view class="value" @click="yinpingChange('level')">
					<input placeholder="请选择" disabled v-model="formData.level"></input>
					<u-icon name="arrow-right" />
				</view>
			</view>
			<view class="content">
				<view class="label">船舶类型<text>*</text></view>
				<view class="value" @click="yinpingChange('vesseltype')">
					<input placeholder="请选择" disabled v-model="formData.vesseltype"></input>
					<u-icon name="arrow-right" />
				</view>
			</view>
			<view class="content">
				<view class="label">所在地区<text>*</text></view>
				<view class="value" @click="yinpingChange('area')">
					<input placeholder="请选择" disabled v-model="formData.area"></input>
					<u-icon name="arrow-right" />
				</view>
			</view>
			<view class="content">
				<view class="value values">
					其他信息
					<textarea style="width: 100%;" v-model="formData.other" placeholder="请输入内容" maxlength="-1"></textarea>
				</view>
			</view>
		</view>
		<view class="title">证书信息</view>
		<view class="upload_box">
			<view class="upload_box_title">
				服务簿<text>*</text>
			</view>
			<u-upload :fileList="uploadData.serviceimages" :action="state.url"
				:before-upload="(index, list) => beforeUpload(index, list,'serviceimages')" max-count="9"
				@on-remove="(index,list)=> onRemove(index,list,'serviceimages')"></u-upload>
		</view>
		<view class="upload_box">
			<view class="upload_box_title">
				适任证书<text>*</text>
			</view>
			<u-upload :fileList="uploadData.competentimages" :action="state.url"
				:before-upload="(index, list) => beforeUpload(index, list,'competentimages')" max-count="9"
				@on-remove="(index,list)=> onRemove(index,list,'competentimages')"></u-upload>
		</view>
		<view class="upload_box">
			<view class="upload_box_title">
				海员证
			</view>
			<u-upload :fileList="uploadData.seamanimages" :action="state.url"
				:before-upload="(index, list) => beforeUpload(index, list,'seamanimages')" max-count="9"
				@on-remove="(index,list)=> onRemove(index,list,'seamanimages')"></u-upload>
		</view>
		<view class="upload_box">
			<view class="upload_box_title">
				护照
			</view>
			<u-upload :fileList="uploadData.passportimages" :action="state.url"
				:before-upload="(index, list) => beforeUpload(index, list,'passportimages')" max-count="9"
				@on-remove="(index,list)=> onRemove(index,list,'passportimages')"></u-upload>
		</view>
		<view class="upload_box">
			<view class="upload_box_title">
				其他证书
			</view>
			<u-upload :fileList="uploadData.otherimages" :action="state.url"
				:before-upload="(index, list) => beforeUpload(index, list,'otherimages')" max-count="9"
				@on-remove="(index,list)=> onRemove(index,list,'otherimages')"></u-upload>
		</view>
		<view class="btn">
			<u-button type="primary" @click="save">立即提交</u-button>
		</view>
	</view>
	<u-picker v-model="state.dateShow" mode="time" @confirm="dateChange"></u-picker>
	<u-picker v-model="state.sexShow" mode="selector" :range="state.actions" @confirm="sexChange"
		range-key="text"></u-picker>
	<u-picker v-model="state.yinpinShow" mode="selector" :range="typeData[state.activeKey]" @confirm="yinpinConfirm"
		range-key="text"></u-picker>
	<Tabbar :value="-1" />
</template>

<script setup lang="ts">
	// import dayjs from 'dayjs';
	import { reactive, ref, nextTick } from 'vue';
	import Tabbar from '@/components/tabbar.vue'
	import { vitainfo, updatevita, shipConfig } from '@/common/api'
	import { onLoad, } from '@dcloudio/uni-app'
	import { uploadRequest } from '@/util/request/index.js'

	const state = reactive({
		sexShow: false,
		loading: false,
		action: 'https://zg.ihaiyuan.com',
		url: '/api/common/upload',
		loginInfo: {},
		actions: [
			{ value: 1, text: '男' },
			{ value: 2, text: '女' },
			{ value: 0, text: '未知' },
		],
		dateShow: false,
		genderValue: '',
		activeKey: '',
		yinpinShow: false,
	})
	const formData = reactive<UpdatevitaModel>({
		name: '',
		avatar: '',
		gender: 0,
		birthday: '',
		idcard: '',
		certjob: '',
		mobile: '',
		position: '',
		level: '',
		vesseltype: '',
		area: '',
		other: '',
		serviceimages: '',
		competentimages: '',
		seamanimages: '',
		passportimages: '',
		otherimages: '',
	})
	const uploadData = reactive({
		avatar: [],
		serviceimages: [],
		competentimages: [],
		seamanimages: [],
		passportimages: [],
		otherimages: [],
	})
	const selectChange = () => {
		state.dateShow = !state.dateShow
	}
	const dateChange = (e) => {
		formData.birthday = `${e.year}-${e.month}-${e.day}`
		console.log(e)
		state.dateShow = !state.dateShow
	}
	const onRemove = (index, list, key : string) => {
		console.log(key)
		console.log(index)
		console.log(list)
		formData[key] = list.map(item => item.url).join(',')
		console.log(formData)
	}
	const beforeUpload = (index, list, key : string) => {
		uni.showLoading({
			title: '图片上传中...',
			mask: true,
		})
		uploadRequest(list[index].url).then(res => {
			if (res.code == 1) {
				if (key == 'avatar') {
					formData[key] = res.data.url
				} else {
					if (formData[key]) {
						let data = formData[key].split(',')
						data.push(res.data.url)
						formData[key] = data.join(',')
					} else {
						formData[key] = res.data.url
					}
				}
				uni.hideLoading()
			} else {
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}

		})
		return false
	}
	const yinpingChange = (key : string) => {
		state.activeKey = key
		state.yinpinShow = !state.yinpinShow
	}
	const yinpinConfirm = (e) => {
		console.log(e)
		const index = e[0]
		formData[state.activeKey] = typeData[state.activeKey][index]
	}

	const sexChange = (e) => {
		formData.gender = state.actions[e[0]].value
		if (formData.gender || formData.gender === 0) {
			state.genderValue = state.actions.find(item => item.value == formData.gender).text
		}
	}

	const typeData = reactive({
		area: [],
		level: [],
		position: [],
		vesseltype: [],
		certjob: [],
	})
	onLoad(() => {
		state.url = uni.$u.http.config.baseUrl + state.url
		getInfo()
		getConfig()
	})
	const getInfo = async () => {
		state.loading = true
		const { data } = await vitainfo()
		console.log(data)
		for (let i in formData) {
			formData[i] = data[i]
			if (i == 'gender') {
				formData[i] = data[i] || 0
			}
		}
		for (let i in uploadData) {
			if (data[`${i}_show`]) {
				if (i == 'avatar') {
					uploadData[i].push({
						url: data[`${i}_show`][0]
					})
				} else {
					uploadData[i] = data[`${i}_show`].map(item => {
						return {
							url: item
						}
					})
				}
			}
		}
		if (formData.gender || formData.gender === 0) {
			state.genderValue = state.actions.find(item => item.value == formData.gender).text
		}
		state.loading = false
		console.log(uploadData)
	}
	const getConfig = async () => {
		const { data } = await shipConfig()
		console.log(data)
		for (let i in typeData) {
			typeData[i] = data[i]
		}
	}
	const save = async () => {
		console.log(formData)

		if (!formData.name) {
			uni.showToast({
				title: `请输入姓名！`,
				icon: 'none'
			})
			return
		}
		if (!formData.gender) {
			uni.showToast({
				title: `请选择性别！`,
				icon: 'none'
			})
			return
		}
		if (!formData.birthday) {
			uni.showToast({
				title: `请选择出生年月！`,
				icon: 'none'
			})
			return
		}
		if (!formData.certjob) {
			uni.showToast({
				title: `请选择证书职务！`,
				icon: 'none'
			})
			return
		}
		if (!formData.certjob) {
			uni.showToast({
				title: `请输入手机号！`,
				icon: 'none'
			})
			return
		}
		if (!formData.position) {
			uni.showToast({
				title: `请选择职能职位！`,
				icon: 'none'
			})
			return
		}

		if (!formData.level) {
			uni.showToast({
				title: `请选择证书等级！`,
				icon: 'none'
			})
			return
		}
		if (!formData.vesseltype) {
			uni.showToast({
				title: `请选择船舶类型！`,
				icon: 'none'
			})
			return
		}
		if (!formData.area) {
			uni.showToast({
				title: `请选择所在地区！`,
				icon: 'none'
			})
			return
		}
		if (!formData.serviceimages) {
			uni.showToast({
				title: `请选择服务簿！`,
				icon: 'none'
			})
			return
		}
		if (!formData.competentimages) {
			uni.showToast({
				title: `请选择适任证书！`,
				icon: 'none'
			})
			return
		}
		const data = await updatevita(formData)
		if (data.code == 1) {
			uni.showToast({
				title: `修改成功！`,
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				})
			}, 1500)
		} else {
			uni.showToast({
				title: `修改失败！`,
				icon: 'none'
			})
		}
	}
	const uploadImgReturn = (key : string) => {
		console.log(formData[key])
		if (formData[key]) {
			return [formData[key]]
		} else {
			return []
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		overflow: hidden;
	}

	.container {
		position: relative;
		width: 750rpx;
		height: 100%;
		padding: 20rpx 35rpx 200rpx;
		box-sizing: border-box;
		overflow: auto;

		.loading_main {
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 80vh;
			justify-content: center;

			.loading_footer {
				margin-top: 30rpx;
			}
		}

		.btn {
			width: 160rpx;
			margin: 0 auto;
			padding-top: 40rpx;
		}

		.user {
			width: 100%;
			background: #fff;
			padding: 28rpx 30rpx;
			// height: 425rpx;
			box-sizing: border-box;
			margin-bottom: 15rpx;
			box-shadow: rgba(0, 0, 0, 0.1) 0rpx 4rpx 6rpx -1px, rgba(0, 0, 0, 0.06) 0rpx 2rpx 4rpx -1rpx;
			border-radius: 8rpx;
		}

		.title {
			font-size: 32rpx;
			color: #282828;
			display: flex;
			align-items: center;
			padding: 25rpx 20rpx 25rpx;

			&::before {
				content: ' ';
				display: block;
				height: 32rpx;
				width: 8rpx;
				background-color: #3D69FE;
				margin-right: 10rpx;
			}
		}

		.pop_image {
			text-align: right;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin: 0;
			padding: 0;
			background-color: transparent !important;
			border: 0 !important;
			outline: 0;

			image {
				width: 120rpx;
				height: 120rpx;
				margin: 0;
				padding: 0;
			}

			&::after {
				border: none;
			}
		}

		.content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			font-size: 30rpx;

			.label {
				height: 64rpx;

				text {
					color: #ED0909;
				}
			}

			.value {
				text-align: right;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				input {
					border: 0;
					height: 64rpx;
					text-align: right;
				}

				:deep().u-upload {
					>view {
						justify-content: flex-end;
					}
				}


			}

			.values {
				text-align: left;
				flex-direction: column;
				align-items: flex-start;

				textarea {
					border: 2rpx solid #282828;
					margin-top: 20rpx;
					border-radius: 8rpx;
					padding: 20rpx;
					box-sizing: border-box;
				}
			}
		}

		.yinpin {
			width: 100%;
			background: #fff;
			padding: 28rpx 30rpx;
			// height: 456rpx;
			box-sizing: border-box;
			margin-bottom: 15rpx;
			box-shadow: rgba(0, 0, 0, 0.1) 0rpx 4rpx 6rpx -1px, rgba(0, 0, 0, 0.06) 0rpx 2rpx 4rpx -1rpx;
			border-radius: 8rpx;

		}

		.upload_box {
			padding-left: 50rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #282828;

			&_title {
				padding: 12rpx 0;

				text {
					color: #ED0909;
				}
			}

			:deep().u-list-item {
				background-color: #fff;
				border: 2rpx solid #282828;
				margin: 0;
			}
		}
	}
</style>